<template>
	<view>
		<view style="display: flex;flex-direction: column;align-items: center;">
			<scroll-view scroll-y="true" class="scroll-Y" enable-flex="true" style="height: 270px;padding-top: 15px;">
				<view style="display: flex; justify-content: center;width: 100%;" v-for="item in activityList.ai" :key="item.id">
					<image lazy-load=true mode="aspectFit" class="srollimg" :src="item.url"></image>
				</view>
			</scroll-view>
		
			<view class="cu-list menu listdiv" 
			:class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']"
			>
				<view class="cu-item ">
					<view class="content" style="display: flex;align-items: center;">
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">活动名称:</text>
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">{{activityList.activityName}}</text>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content" style="display: flex;align-items: center;">
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">活动时间:</text>
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">{{activityList.activityDate}}</text>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content" style="display: flex;align-items: center;">
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">发  起  者:</text>
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">{{' '+activityList.activityUser}}</text>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content" style="display: flex;align-items: center;">
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">联系方式:</text>
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">{{activityList.telNumber}}</text>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content" style="display: flex;align-items: center;">
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">参与情况:</text>
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">{{activityList.tookNumber+'/'+activityList.limitNumber}}</text>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content" style="display: flex;align-items: center;">
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">活动说明:</text>
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">{{activityList.activityDesc}}</text>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content" style="display: flex;align-items: center;">
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">发布时间:</text>
						<text class="text-grey" style="padding-left: 15px; font-size: 16px;">{{activityList.updateTime}}</text>
					</view>
				</view>
				<view class="cu-item ">
					<view class="content" style="display: flex;align-items: center;justify-content: center;color: #8799a3;">
						我要评分：<uni-rate 
						value="0"
						:star="star"
						:userId="userId" 
						:activityId="activityid" 
						:Authorization="Authorization"></uni-rate>
					</view>
				</view>
			</view>
		</view>
		
		<view style="display: flex;flex-direction: column;align-items: center;">
			<view class="cu-list menu listdiv"
			:class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']"
			>
				<view class="cu-item ">
					<view class="content" style="display: flex;align-items: center;justify-content: center;">
						评论
					</view>
				</view>
				<view style="height: auto;background-color: #FFFFFF;border-bottom: 0.5px solid #EEEEEE;" v-for="item in contentList" :key="item.commentId">
					<view style="padding: 5px 20px;display: flex;justify-content: space-between;font-size: 14px;">
						<text>{{item.name}}</text>
						<text>{{item.createTime}}</text>
					</view>
					<view class="cu-item">
						<view class="content" style="display: flex;align-items: center;padding: 5px 20px;font-size: 13px;color: #8799a3;">
							{{item.content}}
						</view>
					</view>
					<view class="cu-item">
						<view class="content" style="display: flex;align-items: center;justify-content: center;padding: 5px 15px;">
							<image lazy-load=true mode="aspectFit" :src="item.commentPic"></image>
						</view>
					</view>
				</view>
				<view v-show="contentList.length == 0" style="height: auto;background-color: #FFFFFF;border-bottom: 0.5px solid #EEEEEE;text-align: center;">
					<text>暂无评论！</text>
				</view>
			</view>
		</view>
		
		<view style="height: 60px;text-align: center;margin-top:20px;">
			<view style="line-height: 1.8;">
				CDIO-1组&copy;版权所有
			</view>
			<view style="line-height: 1.8;">
				<a style="text-decoration: none;color: #000000;" href="http://www.miit.gov.cn/">备案号:苏ICP备19058910号</a>
			</view>
		</view>
		<view style="height: 60px;width: 100%;"></view>
		<view class="cu-bar bg-white tabbar border shop adddibu">
			<!-- 点赞 -->
			<button class="action" open-type="contact" v-show="zan == true" @tap="dianzan">
				<view class="cuIcon-appreciate text-red"></view>
			</button>
			<button class="action" open-type="contact" v-show="zan == false || zan == null "  @tap="dianzan">
				<view class="cuIcon-appreciate"></view>
			</button>
			
			<!-- 收藏 -->
			<view class="action text-orange" v-show="collect == true" @tap="docollect">
				<view class="cuIcon-favorfill"></view>
			</view>
			<view class="action" v-show="collect == false || collect == null" @tap="docollect">
				<view class="cuIcon-favorfill"></view>
			</view>
			<!-- 购物车 -->
			<view class="action" @tap="car" v-show="carzone == true">
				<view class="cuIcon-cart  text-orange"></view>
			</view>
			<view class="action" @tap="car" v-show="carzone == false || carzone == null">
				<view class="cuIcon-cart"></view>
			</view>
			<button class="bg-red submit" @tap="showModal" data-target="bottomModal" v-if="ismine == 'false'" :disabled="isdisable">{{buttonName}}</button>
			<button class="bg-red submit" @tap="topartner" v-else-if="ismine == 'true'">参与情况</button>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog" style="height: 200px;">
				<view class="cu-bar bg-white">
					<view class="action text-blue" @tap="hideModal">取消</view>
					<view class="action text-red" @tap="join">确定</view>
				</view>
				<view class="padding-xl" style="height: 150px;vertical-align: middle;display: flex; justify-content: center;align-items: center;">
					<text style="font-size: 20px;">确定参与吗？</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/uni-rate/uni-rate.vue'
	export default {
		components: {uniRate},
		data() {
			return {
				star:0,
				activityid: '',
				activityList: {},
				menuCard: true,
				menuBorder: false,
				menuArrow: false,
				modalName: null,
				contentList: [],
				Authorization: '',
				userId:'',
				zan: false,
				collect: false,
				rating:'',
				carzone: false,
				isjoined: false,
				ismine: false,
				isdisable: false,
				buttonName: '立即参与'
			}
		},
		onLoad(option) {
			this.activityid = option.activityid
			this.ismine = option.ismine
			this.info()
			uni.startPullDownRefresh();
			this.getCookies()
			this.iscollect()
			this.israting()
			this.getCom()
		},
		onPullDownRefresh() {
			this.info()
		    setTimeout(function () {
		        uni.stopPullDownRefresh();
		    }, 500);
		},
		onShow() {
			this.getlocal()
		},
		onReady() {
		},
		methods: {
			topartner() {
				uni.navigateTo({
				    url: '../mine/components/partner?activityId='+this.activityid+'&activityName='+this.activityList.activityName
				});
			},
			getCom() {
				let that = this
				uni.request({
					url: 'http://101.37.15.60:8080/comments/',
					data: {
						activityId: that.activityid
					},
					header: {
						'Authorization': 'Bearer '+that.Authorization
					},
					success: (res) => {
						let List = res.data.data
						for(let i = 0;i<List.length;i++) {
							uni.request({
								url: 'http://101.37.15.60:8080/api/v1/users/get',
								data: {
									id: List[i].userId
								},
								success(res) {
									List[i].name = res.data.data.name
								}
							})
						}
						setTimeout(function() {
							that.contentList = List
							},150)
					}
				})
			},
			israting() {
				let that = this
				uni.request({
					url: 'http://101.37.15.60:8080/ratings/' + that.activityid +'?userId='+that.userId,
					header: {
						'Authorization': 'Bearer '+that.Authorization
					},
					success: (res) => {
						that.star = res.data.data
					}
				})
			},
			iscollect() {
				let that = this
				uni.request({
					url: 'http://101.37.15.60:8080/collects/' + that.activityid +'?userId='+that.userId,
					header: {
						'Authorization': 'Bearer '+that.Authorization
					},
					success: (res) => {
						that.collect = res.data.data
					}
				})
			},
			docollect() {
				let that = this
					uni.request({
						url: 'http://101.37.15.60:8080/collects/?activityId='+that.activityid+'&userId='+that.userId,
						method: 'POST',
						header: {
							'Authorization': 'Bearer '+that.Authorization
						},
						success: (res) => {
							if(res.data.data == '取消收藏啦！') {
								that.collect = false
								that.setlocal('收藏'+that.activityid,false)
								uni.showToast({
								    title: '取消收藏',
								    duration: 1000
								})
							}else if(res.data.data == '收藏成功啦！') {
								that.collect = true
								that.setlocal('收藏'+that.activityid,true)
								uni.showToast({
								    title: '收藏成功',
								    duration: 1000
								})
							}
						}
					})
			},
			car() {
				if(this.carzone == true) {
					this.carzone = false
					this.setlocal('空间'+this.activityid,false)
					uni.showToast({
					    title: '取消空间',
					    duration: 1000
					})
				}else if(this.carzone == false || this.carzone == null) {
					this.carzone = true
					this.setlocal('空间'+this.activityid,true)
					uni.showToast({
					    title: '加入空间',
					    duration: 1000
					})
				}
			},
			dianzan() {
				if(this.zan == true) {
					this.zan = false
					this.setlocal('点赞'+this.activityid,false)
					uni.showToast({
					    title: '取消点赞',
					    duration: 1000
					})
				}else if(this.zan == false || this.zan == null) {
					this.zan = true
					this.setlocal('点赞'+this.activityid,true)
					uni.showToast({
					    title: '点赞成功',
					    duration: 1000
					})
				}
			},
			getCookies() {
			  if (document.cookie.length > 0) {
			    var arr = document.cookie.split("; "); //这里显示的格式需要切割一下自己可输出看下
			    for (var i = 0; i < arr.length; i++) {
			      var arr2 = arr[i].split("="); //再次切割
			      //判断查找相对应的值
			      if (arr2[0] == "Authorization") {
			        this.Authorization = arr2[1]; //保存到保存数据的地方
			      }
				  if (arr2[0] == "id") {
				    this.userId = arr2[1]; //保存到保存数据的地方
				  }
			    }
			  }
			},
			join() {
				this.getCookies()
				let that = this
				uni.request({
					url: 'http://101.37.15.60:8080/users/take',
					data: {
						activityId: that.activityid
					},
					header: {
						'Authorization': 'Bearer '+that.Authorization
					},
					success: (res) => {
							that.modalName = null
							that.setlocal('参与'+that.activityid,true)
							that.isjoined = true
							that.isdisable = true
							that.buttonName = '您已参与'
							uni.showToast({
							    title: res.data.message,
							    duration: 1000
							})
					}
				})
			},
			getlocal() {
				
				//是否可参与
				if(this.activityList.limitNumber - this.activityList.tookNumber > 0) {
					this.buttonName = '人数已满'
					this.isdisable = false
				}
				
				// 是否参与
				let content1 = JSON.parse(localStorage.getItem('参与'+this.activityid))
				if(content1 == true) {
					this.buttonName = '您已参与'
					this.isdisable = true
				}else{
					this.buttonName = '立即参与'
					this.isdisable = false
				}
				//是否点赞
				let content2 = JSON.parse(localStorage.getItem('点赞'+this.activityid))
				this.zan = content2
				
				//是否收藏
				// let content3 = JSON.parse(localStorage.getItem('收藏'+this.activityid))
				// this.collect = content3
				
				//是否加入购物车
				let content4 = JSON.parse(localStorage.getItem('空间'+this.activityid))
				this.carzone = content4
				
			},
			setlocal(key,data) {
				window.localStorage.setItem(key, JSON.stringify(data))
			},
			hideModal(e) {
				this.modalName = null
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			info() {
				let that= this
				let id = that.activityid*1
				uni.request({
					url: 'http://101.37.15.60:8080/activity/selectById',
					data: {
						id: id
					},
					success: (res) => {
						if(res.data.message == 'SUCCESS') {
						that.activityList = res.data.data[0]
						let time = res.data.data[0].activityDate
						let arrTime = []
						arrTime = time.split(' ')
						let newTime = arrTime[0]
						that.activityList.activityDate = newTime
						}
					}
				})
			}
		},
		computed:{
	
		}
	}
</script>

<style scoped>
	.srollimg {
		background-color: #FFFFFF;
		margin: 0 15px ;
	}
	.listdiv {
		width: 320px;
		margin: 15px 0 0 0;
	}
	.adddibu {
		position: fixed;
		bottom: 0;
		width: 100%;
	}
</style>
